<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="Mosaddek">
  <meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
  <link rel="icon" href="../img/favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon" />

  <title>项目费用</title>

  <!-- Bootstrap core CSS -->
  <link href="../css/bootstrap.min.css" rel="stylesheet">
  <link href="../css/bootstrap-reset.css" rel="stylesheet">
  <!--external css-->
  <link href="../assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
  <link href="../assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen" />
  <link rel="stylesheet" href="../css/owl.carousel.css" type="text/css">

  <!-- 日期组件 -->
  <link rel="stylesheet" type="text/css" href="../assets/bootstrap-datepicker/css/bootstrap-datetimepicker.min.css" />
  <link rel="stylesheet" type="text/css" href="../assets/bootstrap-colorpicker/css/colorpicker.css" />
  <link rel="stylesheet" type="text/css" href="../assets/bootstrap-daterangepicker/daterangepicker.css" />

  <!-- Custom styles for this template -->
  <link href="../css/style.css" rel="stylesheet">
  <link href="../css/style-responsive.css" rel="stylesheet" />

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
  <!--[if lt IE 9]>
      <script src="../js/html5shiv.js"></script>
      <script src="../js/respond.min.js"></script>
    <![endif]-->

  <!-- 表格组件 -->
  <link rel="stylesheet" type="text/css" href="../assets/table/dependents/fontAwesome/css/font-awesome.min.css" media="all" />
  <link rel="stylesheet" type="text/css" href="../assets/table/dlshouwen.grid.css" />
  <link rel="stylesheet" type="text/css" href="../assets/table/dependents/datePicker/skin/WdatePicker.css" />
  <link rel="stylesheet" type="text/css" href="../assets/table/dependents/datePicker/skin/default/datepicker.css" />

  <!-- 当前页面CSS -->
  <link href="../css/index.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <section id="container" class="">
    <!--header start-->
    <header class="header white-bg">
      <div class="sidebar-toggle-box">
        <div data-placement="right" class="icon-reorder tooltips"></div>
      </div>
      <!--logo start-->
      <a href="#" class="logo">
        <span>Certus</span>Net
      </a>
      <!--logo end-->
      <div class="nav notify-row" id="top_menu">
        <!--  notification start -->
        <ul class="nav top-menu">
          <!-- settings start -->
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
              <i class="icon-tasks"></i>
              <span class="badge bg-success">7</span>
            </a>
            <ul class="dropdown-menu extended tasks-bar">
              <div class="notify-arrow notify-arrow-green"></div>
              <a class="icon-more" href="../system/notice.html">查看更多</a>
              <li>
                <p class="green">项目动态</p>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">XXX项目，投标成功，项目负责人李四。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">XXX项目，立项成功，项目负责人张三。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">XXX项目，回款成功，项目负责人王五。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">XXX项目，签约成功，项目负责人陈七。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">XXX项目，招标成功，项目负责人吴晓晓。</div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
          <!-- settings end -->
          <!-- inbox dropdown start-->
          <li id="header_inbox_bar" class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
              <i class="icon-envelope-alt"></i>
              <span class="badge bg-important">8</span>
            </a>
            <ul class="dropdown-menu extended inbox">
              <div class="notify-arrow notify-arrow-red"></div>
              <a class="icon-more" href="../system/notice.html">查看更多</a>
              <li>
                <p class="red">通知消息</p>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">编号NJ920392立项申请，审批通过，请及时处理。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">编号NJ92222投标申请，审核通过，请及时处理。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">编号NJ926754招标申请，已同意，请及时处理。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">编号NJ920243线索申请，审批未通过，请及时处理。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">编号NJ920255商务预测，已同意，请及时处理。</div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
          <!-- inbox dropdown end -->
          <!-- notification dropdown start-->
          <li id="header_notification_bar" class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
              <i class="icon-bell-alt"></i>
              <span class="badge bg-warning">9</span>
            </a>
            <ul class="dropdown-menu extended notification">
              <div class="notify-arrow notify-arrow-yellow"></div>
              <a class="icon-more" href="../system/notice.html">查看更多</a>
              <li>
                <p class="yellow">系统公告</p>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">公司内部岗位招聘，有意者请联系相关岗位招聘人员。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">因暴雨天气影响，06月02日全体公司人员放假一天。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">IMS v1.0系统上线，希望各位积极踊跃反馈建议。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">系统更新，新增行政中心板块-新增用章申请。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">系统维护，维护时间：2018年06月01日20:00-2018年06月06日17:00</div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
          <!-- notification dropdown end -->
        </ul>
        <!--  notification end -->
      </div>
      <div class="top-nav ">
        <!--search & user info start-->
        <ul class="nav pull-right top-menu">
          <!-- user login dropdown start-->
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
              <span class="username">用户名</span>
              <b class="caret"></b>
            </a>
            <ul class="dropdown-menu extended logout">
              <div class="log-arrow-up"></div>
              <li>
                <a href="../../office/edit/edit-user-1.html">
                  个人中心
                </a>
              </li>
              <li>
                <a href="../../office/edit/edit-user-2.html">
                  账户设置
                </a>
              </li>
              <li>
                <a href="../login.html">
                  退出登录
                </a>
              </li>
            </ul>
          </li>
          <!-- user login dropdown end -->
        </ul>
        <!--search & user info end-->
      </div>
    </header>
    <!--header end-->
    <!--sidebar start-->
    <aside>
      <div id="sidebar" class="nav-collapse ">
        <!-- sidebar menu start-->
        <ul class="sidebar-menu">
          <li>
            <a class="" href="../index.html">
              <i class="icon-windows"></i>
              <span>信息中心</span>
            </a>
          </li>
          <li class="sub-menu">
            <a href="javascript:;" class="">
              <i class="icon-book"></i>
              <span>我的项目</span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../project/project.html">项目管理</a>
              </li>
              <li>
                <a class="" href="../project/customer.html">客户管理</a>
              </li>
              <li>
                <a class="" href="../project/demand.html">需求管理</a>
              </li>
              <li>
                <a class="" href="../project/problem.html">问题管理</a>
              </li>
              <li>
                <a class="" href="../project/quality.html">质量管理</a>
              </li>
            </ul>
          </li>
          <li class="sub-menu">
            <a href="javascript:;" class="">
              <i class="icon-exchange"></i>
              <span>我的流程</span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../do/initiate.html">我的发起</a>
              </li>
              <li>
                <a class="" href="../do/do.html">待办事项</a>
              </li>
              <li>
                <a class="" href="../do/tdo.html">已办事项</a>
              </li>
              <li>
                <a class="" href="../do/meeting.html">会议预定</a>
              </li>
              <li>
                <a class="" href="../do/oabt.html">出差申请</a>
              </li>
              <li>
                <a class="" href="../do/afr.html">报销申请</a>
              </li>
              <li>
                <a class="" href="../do/proc.html">采购申请</a>
              </li>
              <li>
                <a class="" href="../do/holiday.html">请假调休</a>
              </li>
              <li>
                <a class="" href="../do/overtime.html">加班申请</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="../okr/okr.html" class="">
              <i class="icon-calendar"></i>
              <span>OKR管理</span>
            </a>
          </li>
          <li class="sub-menu">
            <a href="javascript:;" class="">
              <i class="icon-folder-close"></i>
              <span>文档管理 </span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../doct/doct-yf.html">研发类文档</a>
              </li>
              <li>
                <a class="" href="../doct/doct-sc.html">市场类文档</a>
              </li>
              <li>
                <a class="" href="../doct/doct-qt.html">行政/其他类</a>
              </li>
            </ul>
          </li>
          <li class="sub-menu active">
            <a href="javascript:;" class="">
              <i class="icon-bar-chart"></i>
              <span>运营管理 </span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../opmt/bi.html">数据图表</a>
              </li>
              <li>
                <a class="" href="../opmt/focus.html">关注管理</a>
              </li>
              <li>
                <a class="" href="../opmt/data.html">项目数据</a>
              </li>
              <li>
                <a class="" href="../opmt/income.html">收入回款</a>
              </li>
              <li class="active">
                <a class="" href="../opmt/cost.html">项目费用</a>
              </li>
              <li>
                <a class="" href="../opmt/human.html">人力投入</a>
              </li>
              <li>
                <a class="" href="../opmt/htgl.html">合同管理</a>
              </li>
            </ul>
          </li>
          <li class="sub-menu">
            <a href="javascript:;" class="">
              <i class="icon-suitcase"></i>
              <span>行政中心</span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../adms/work.html">工作安排</a>
              </li>
              <li>
                <a class="" href="../adms/time.html">定时提醒</a>
              </li>
              <li>
                <a class="" href="../adms/certificate.html">证书使用</a>
              </li>
              <li>
                <a class="" href="../adms/offseal.html">公章使用</a>
              </li>
              <li>
                <a class="" href="../adms/assets.html">资产管理</a>
              </li>
              <li>
                <a class="" href="../adms/proc.html">个人资产</a>
              </li>
              <li>
                <a class="" href="../adms/docking.html">办公对接</a>
              </li>
            </ul>
          </li>
          <li class="sub-menu">
            <a href="javascript:;" class="">
              <i class="icon-group"></i>
              <span>人事中心</span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../office/org.html">组织架构</a>
              </li>
              <li>
                <a class="" href="../office/users.html">员工管理</a>
              </li>
              <li>
                <a class="" href="../office/attd.html">考勤管理</a>
              </li>
            </ul>
          </li>
          <li class="sub-menu">
            <a href="javascript:;" class="">
              <i class="icon-paste"></i>
              <span>规章制度</span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../rules/wdgl.html">总则</a>
              </li>
              <li>
                <a class="" href="../rules/gsbm.html">公司管理制度</a>
              </li>
              <li>
                <a class="" href="../rules/rygl.html">各部门管理制度</a>
              </li>
            </ul>
          </li>
          <li>
            <a class="" href="../efficiency/improve.html">
              <i class="icon-rocket"></i>
              <span>效率提升</span>
            </a>
          </li>
          <li>
            <a class="" href="../school/learning.html">
              <i class="icon-globe"></i>
              <span>网上学堂</span>
            </a>
          </li>
          <li class="sub-menu">
            <a class="" href="javascript:;">
              <i class="icon-cogs"></i>
              <span>系统管理</span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../system/notice.html">系统公告</a>
              </li>
              <li>
                <a class="" href="../system/help.html">帮助文档</a>
              </li>
            </ul>
          </li>
          <li class="sub-menu">
            <a class="" href="javascript:;">
              <i class="icon-edit"></i>
              <span>建议反馈</span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../advice/feedback.html">在线反馈</a>
              </li>
              <li>
                <a class="" href="../advice/tqus.html">问卷调查</a>
              </li>
            </ul>
          </li>
          <li>
            <a class="" href="javascript:;">
              <i class="icon-comments"></i>
              <span>企业论坛</span>
            </a>
          </li>
        </ul>
        <!-- sidebar menu end-->
      </div>
    </aside>
    <!--sidebar end-->
    <!--main content start-->
    <section id="main-content">
      <section class="wrapper">
        <!--state overview start-->
        <div class="row">
          <div class="col-lg-12">
            <!-- 数据概览 icon:数据加载更新 报表下载-->

            <!-- 
              项目总和 list:项目总和（关注项目类、销售类、研发类、部门类、其他类）
              项目分部地区 （东北地区、西北地区、西南地区、华南地区、华中地区、华北地区、华东地区）
              项目收入总预测 
              项目回款总和 
              项目消费总预测 （客户交际费用、差旅费用、采购费用、其他费用）
              项目消费总和（线索阶段、立项阶段、合同阶段、交付阶段、回款阶段） 
            -->
            <div class="row">
              <div class="col-lg-6">
                <div class="row">

                  <div class="col-lg-12">
                    <section class="panel">
                      <header class="panel-heading add-heading">
                        项目年收入明细
                        <i class="add-icon">更新于：2018/09/05 14:00:00</i>
                      </header>
                      <footer class="weather-category">
                        <ul>
                          <li>
                            <h5>出差总人力</h5>
                            393.22人/天
                          </li>
                          <li>
                            <h5>预测总收入</h5>
                            ￥99999.00万元
                          </li>
                          <li>
                            <h5>实际总回款</h5>
                            ￥99999.00万元
                          </li>
                        </ul>
                      </footer>
                      <div class="panel-body">
                        <div id="main1" style="width:100%;height:404px;"></div>
                      </div>
                    </section>
                  </div>
                </div>

              </div>
              <div class="col-lg-6">
                <div class="row">
                  <div class="col-lg-12">
                    <section class="panel">
                      <div class="panel-body">
                        <ul class="summary-list">
                          <li>
                            <a href="javascript:;">
                              <i class="text-primary">关注项目</i>
                              12
                            </a>
                          </li>
                          <li>
                            <a href="javascript:;">
                              <i class="text-success">销售项目</i>
                              2
                            </a>
                          </li>
                          <li>
                            <a href="javascript:;">
                              <i class="text-danger">研发项目</i>
                              4
                            </a>
                          </li>
                          <li>
                            <a href="javascript:;">
                              <i class="text-info">部门事务</i>
                              6
                            </a>
                          </li>
                          <li>
                            <a href="javascript:;">
                              <i class="text-muted">其他</i>
                              3
                            </a>
                          </li>
                        </ul>
                      </div>
                    </section>
                  </div>
                  <div class="col-lg-12">
                    <section class="panel">
                      <header class="panel-heading">
                        搜索条件
                      </header>
                      <div class="panel-body">
                          <form class="form-horizontal tasi-form">
                            <!-- 搜索条件 年份 项目分布区域 项目类型 项目状态-->
                            <div class="form-group">
                              <label class="col-sm-2 control-label">年份</label>
                              <div class="col-sm-10">
                                <input id="prolist" type="text" value="2018" class="form-control">
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="col-sm-2 control-label">区域</label>
                              <div class="col-sm-10">
                                <select class="form-control">
                                  <option>全部</option>
                                  <option>北京</option>
                                  <option>天津</option>
                                  <option>上海</option>
                                  <option>重庆</option>
                                  <option>河北</option>
                                  <option>河南</option>
                                  <option>云南</option>
                                  <option>辽宁</option>
                                  <option>黑龙江</option>
                                  <option>湖南</option>
                                  <option>安徽</option>
                                  <option>山东</option>
                                  <option>新疆</option>
                                  <option>江苏</option>
                                  <option>浙江</option>
                                  <option>江西</option>
                                  <option>湖北</option>
                                  <option>广西</option>
                                  <option>甘肃</option>
                                  <option>山西</option>
                                  <option>内蒙古</option>
                                  <option>陕西</option>
                                  <option>吉林</option>
                                  <option>福建</option>
                                  <option>贵州</option>
                                  <option>广东</option>
                                  <option>青海</option>
                                  <option>西藏</option>
                                  <option>四川</option>
                                  <option>宁夏</option>
                                  <option>海南</option>
                                  <option>台湾</option>
                                  <option>香港</option>
                                  <option>澳门</option>
                                  <option>南海诸岛</option>
                                  <option>美国</option>
                                  <option>其他</option>
                                </select>
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="col-sm-2 control-label">类型</label>
                              <div class="col-sm-10">
                                <select class="form-control">
                                  <option>全部类型</option>
                                  <option>关注的项目</option>
                                  <option selected>销售类项目</option>
                                  <option>研发类项目</option>
                                  <option>部门事务类项目</option>
                                  <option>其他类项目</option>
                                </select>
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="col-sm-2 control-label">项目名称</label>
                              <div class="col-sm-10">
                                <input type="text" value="" class="form-control">
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="col-sm-2 control-label">状态</label>
                              <div class="col-sm-10">
                                <select class="form-control">
                                  <option>全部类型</option>
                                  <option>运行中</option>
                                  <option>已关闭</option>
                                  <option>已暂停</option>
                                  <option>已完结</option>
                                </select>
                              </div>
                            </div>
                            <p class="default-buttons">
                              <a href="javascript:void(0);" class="button-back btn btn-info">重置</a>
                              <a href="javascript:void(0);" class="button-next  btn btn-info">提交</a>
                            </p>
                          </form>
                        </div>
                    </section>
                  </div>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-lg-8">
                <section class="panel">
                  <header class="panel-heading add-heading">
                    出差人力信息
                    <i class="add-icon">更新于：2018/09/05 14:00:00</i>
                  </header>
                  <div class="panel-body">
                    <div id="main2" style="width:100%;height:362px;"></div>
                  </div>
                </section>
              </div>
              <div class="col-lg-4">
                <section class="panel">
                  <header class="panel-heading add-heading">
                    项目转化率
                    <i class="add-icon">更新于：2018/09/05 14:00:00</i>
                  </header>
                  <div class="panel-body">
                    <div id="main3" style="width:100%;height:362px;"></div>
                  </div>
                </section>
              </div>
            </div>
          </div>
        </div>
        <!--state overview end-->
      </section>
    </section>
    <!--main content end-->
  </section>
  <!-- js placed at the end of the document so the pages load faster -->
  <script src="../js/jquery.js"></script>
  <script src="../js/jquery-1.8.3.min.js"></script>
  <script src="../js/bootstrap.min.js"></script>
  <script src="../js/jquery.scrollTo.min.js"></script>
  <script src="../js/jquery.nicescroll.js" type="text/javascript"></script>
  <script src="../js/jquery.sparkline.js" type="text/javascript"></script>
  <script src="../assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script>
  <script src="../js/owl.carousel.js"></script>
  <script src="../js/jquery.customSelect.min.js"></script>

  <!-- 日期组件 -->
  <script type="text/javascript" src="../assets/bootstrap-datepicker/js/bootstrap-datetimepicker.min.js"></script>
  <script type="text/javascript" src="../assets/bootstrap-daterangepicker/date.js"></script>
  <script type="text/javascript" src="../assets/bootstrap-daterangepicker/daterangepicker.js"></script>


  <!--common script for all pages-->
  <script src="../js/common-scripts.js"></script>

  <!--script for this page-->
  <script src="../js/sparkline-chart.js"></script>
  <script src="../js/easy-pie-chart.js"></script>

  <!-- 外部公共js文件引入 -->
  <script src="../js/layout.js"></script>
  <!-- layer组件 -->
  <script src="../assets/layer/layer.js"></script>
  <!-- echarts组件 -->
  <script type="text/javascript" src="../assets/echarts/echarts.min.js"></script>


  <script type="text/javascript">
    // 时间选择
    $('#prolist').datetimepicker({
      startView: 4,
      minView: 4,
      format: 'yyyy',
    });
  </script>

  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main1'));
    option = {
      tooltip: {
        trigger: 'axis',
        formatter: '{b}{a}:￥{c}万元<br/>{b1}{a1}:￥{c1}万元',
      },
      legend: {
        data: ['预测收入', '实际回款'],
      },
      toolbox: {
        show: true,
        feature: {
          dataView: {
            show: true,
            readOnly: false
          },
          magicType: {
            show: true,
            type: ['line', 'bar']
          },
          restore: {
            show: true
          },
        }
      },
      calculable: true,
      xAxis: [{
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      }],
      yAxis: [{
        type: 'value'
      }],
      series: [{
          name: '预测收入',
          type: 'bar',
          data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
          itemStyle: {
            normal: {
              color: '#4a8bc2'
            }
          },
          markLine: {
            data: [{
              type: 'average',
              name: '平均值'
            }]
          },
        },
        {
          name: '实际回款',
          type: 'bar',
          data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
          itemStyle: {
            normal: {
              color: '#a9d86e'
            }
          },
          markLine: {
            data: [{
              type: 'average',
              name: '平均值'
            }]
          }
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option);
  </script>


  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart2 = echarts.init(document.getElementById('main2'));
    option = {
      tooltip: {
        trigger: 'axis',
        formatter: '{b}{a}:{c}人/天<br/>{b1}{a1}:{c1}人/天'
      },
      legend: {
        data: ['预测', '实际'],
      },
      toolbox: {
        show: true,
        feature: {
          dataView: {
            show: true,
            readOnly: false
          },
          magicType: {
            show: true,
            type: ['line', 'bar']
          },
          restore: {
            show: true
          },
        }
      },
      calculable: true,
      xAxis: [{
        type: 'category',
        boundaryGap: false,
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      }],
      yAxis: [{
        type: 'value'
      }],
      series: [{
          name: '预测',
          type: 'line',
          data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
          itemStyle: {
            normal: {
              color: '#4a8bc2'
            }
          },
          markLine: {
            data: [{
              type: 'average',
              name: '平均值'
            }]
          },
        },
        {
          name: '实际',
          type: 'line',
          data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
          itemStyle: {
            normal: {
              color: '#a9d86e'
            }
          },
          markLine: {
            data: [{
              type: 'average',
              name: '平均值'
            }]
          }
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option);
  </script>

  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart3 = echarts.init(document.getElementById('main3'));
    option = {
      tooltip: {
        trigger: 'item',
        formatter: "{b}{a} : {c}%"
      },
      toolbox: {
        feature: {
          dataView: {
            readOnly: false
          },
          restore: {},
          // saveAsImage: {}
        }
      },
      legend: {
        show: false,
        data: ['线索', '立项', '合同', '交付', '回款'],
      },
      color: ['#4e616d', '#4a8bc2', '#fcb321', '#ff6666', '#a9d86e', ],
      series: [{
          name: '预期转化率',
          type: 'funnel',
          left: '10%',
          width: '80%',
          label: {
            normal: {
              formatter: '{b}'
            },
            emphasis: {
              position: 'inside',
              formatter: '{b}'
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              opacity: 0.7
            }
          },
          data: [{
              value: 100,
              name: '线索'
            },
            {
              value: 80,
              name: '立项'
            },
            {
              value: 60,
              name: '合同'
            },
            {
              value: 40,
              name: '交付'
            },
            {
              value: 20,
              name: '回款'
            }
          ]
        },
        {
          name: '实际转化率',
          type: 'funnel',
          left: '10%',
          width: '80%',
          maxSize: '80%',
          label: {
            normal: {
              position: 'inside',
              formatter: '{c}%',
              textStyle: {
                color: '#fff'
              }
            },
            emphasis: {
              position: 'inside',
              formatter: '实际转化率: {c}%'
            }
          },
          itemStyle: {
            normal: {
              opacity: 0.5,
              borderColor: '#fff',
              borderWidth: 2
            }
          },
          data: [{
              value: 80,
              name: '线索'
            },
            {
              value: 60,
              name: '立项'
            },
            {
              value: 40,
              name: '合同'
            },
            {
              value: 20,
              name: '交付'
            },
            {
              value: 10,
              name: '回款'
            }
          ]
        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart3.setOption(option);
  </script>
  
</body>

</html>